<script setup>
// 导入Vue核心功能和组件
import { ref, computed } from 'vue';
import { useCartStore } from '../stores/cart'; // 导入购物车状态管理
import { RouterLink } from 'vue-router'; // 导入路由链接组件

// 获取购物车状态实例
const cartStore = useCartStore();

// 计算属性：获取购物车中的商品列表
const cartProducts = computed(() => cartStore.cartProducts);
// 计算属性：实时计算购物车总价
const cartTotal = computed(() => cartStore.cartTotal);

/**
 * 更新购物车中商品的数量
 * @param {number} id - 商品ID
 * @param {number} quantity - 新的数量
 */
const updateQuantity = (id, quantity) => {
  cartStore.updateQuantity(id, quantity);
};

/**
 * 从购物车中移除指定商品
 * @param {number} id - 商品ID
 */
const removeProduct = (id) => {
  cartStore.removeProduct(id);
};

/**
 * 清空购物车（带确认对话框）
 */
const clearCart = () => {
  if (confirm('确定要清空购物车吗？')) {
    cartStore.clearCart();
  }
};
</script>

<template>
  <div>
    <!-- 公共头部组件 -->
    <CommonHeader />
    
    <div class="cart-page">
      <h1>购物车</h1>
      
      <!-- 购物车有商品时显示商品列表 -->
      <div v-if="cartProducts.length > 0" class="cart-items">
        <!-- 循环渲染购物车中的每个商品 -->
        <div class="cart-item" v-for="product in cartProducts" :key="product.id">
          <!-- 商品图片区域 -->
          <div class="product-image">
            <img :src="product.image" :alt="product.name" />
          </div>
          
          <!-- 商品信息区域 -->
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p class="price">¥{{ product.price.toFixed(2) }}</p>
            
            <!-- 数量选择器：包含加减按钮和输入框 -->
            <div class="quantity-selector">
              <!-- 减少数量按钮（数量大于1时才允许减少） -->
              <button @click="product.quantity > 1 ? updateQuantity(product.id, product.quantity - 1) : 1">-</button>
              <!-- 数量输入框，双向绑定商品数量 -->
              <input type="number" v-model.number="product.quantity" min="1" @change="updateQuantity(product.id, product.quantity)" />
              <!-- 增加数量按钮 -->
              <button @click="updateQuantity(product.id, product.quantity + 1)">+</button>
            </div>
          </div>
          
          <!-- 商品操作区域 -->
          <div class="product-actions">
            <button @click="removeProduct(product.id)">删除</button>
          </div>
        </div>
      </div>
      
      <!-- 购物车为空时显示的提示信息 -->
      <div v-else class="empty-cart">
        <p>购物车是空的</p>
        <RouterLink to="/">继续购物</RouterLink>
      </div>
      
      <!-- 购物车有商品时显示结算区域 -->
      <div v-if="cartProducts.length > 0" class="cart-summary">
        <!-- 显示购物车总价 -->
        <div class="total">
          <span>总计:</span>
          <span>¥{{ cartTotal.toFixed(2) }}</span>
        </div>
        
        <!-- 清空购物车按钮 -->
        <button @click="clearCart">清空购物车</button>
        
        <!-- 前往结算按钮，使用路由链接导航到结算页面 -->
        <RouterLink to="/checkout" class="checkout-button">前往结算</RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.cart-page {
  margin: 20px auto;
  max-width: 1200px;
  padding: 0 20px;
}

.cart-page h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.cart-items {
  margin-bottom: 30px;
}

.cart-item {
  display: flex;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.product-image {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.product-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.product-info {
  flex: 1;
  padding: 15px;
}

.product-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.product-info .price {
  color: #e53935;
  font-weight: bold;
  margin-bottom: 15px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-selector input {
  width: 50px;
  height: 30px;
  text-align: center;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.product-actions {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.product-actions button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.product-actions button:hover {
  background-color: #d32f2f;
}

.cart-summary {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  text-align: right;
}

.total {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.total span:first-child {
  font-size: 16px;
  color: #666;
}

.total span:last-child {
  font-size: 20px;
  font-weight: bold;
  color: #e53935;
}

.cart-summary button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
}

.checkout-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
}

.empty-cart {
  text-align: center;
  padding: 50px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.empty-cart p {
  margin-bottom: 20px;
  font-size: 18px;
  color: #666;
}

.empty-cart a {
  background-color: #42b983;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}

@media (max-width: 768px) {
  .cart-item {
    flex-direction: column;
  }
  
  .product-image {
    flex: 0 0 auto;
    padding: 10px;
  }
  
  .product-actions {
    flex: 0 0 auto;
  }
}
</style>